<template>
  <Form align-top>
    <h3 style="margin-top: 0">FoldPanel 折叠面板</h3>
    <FormItem label="基础用法">
      <FoldPanel v-model="activeNames" accordion>
        <FoldPanelItem
          v-for="item in list"
          :key="item.name"
          :title="item.title"
          :name="item.name"
        >
          1 薛兆丰经济学讲义 2 AI落地：让人工智能为你所用 3 模型思维 4
          毛泽东选集 5 创新思维：斯坦福设计思维方法与工具
        </FoldPanelItem>
      </FoldPanel>
    </FormItem>
    <FormItem label="Attributes">
      <Table
        :columns="usageAttrColumns"
        :table-data="usageAttrTableData"
      ></Table>
    </FormItem>
    <FormItem label="Slot">
      <Table
        :columns="usageSlotColumns"
        :table-data="usageSlotTableData"
      ></Table>
    </FormItem>
  </Form>
</template>

<script setup lang="ts">
import { FoldPanel, FoldPanelItem, Form, FormItem, Table } from '$/index';
import { Column } from '$/table/types';
import { ref, watchEffect } from 'vue';

const activeNames = ref([1]);

watchEffect(() => console.log(activeNames.value));

const list = ref(
  Array.from({ length: 3 }).map((_, index) => {
    return {
      title: `Title${index + 1}`,
      name: index + 1,
    };
  }),
);

const usageAttrColumns: Array<Column> = [
  {
    prop: 'parameter',
    label: '参数',
  },
  {
    prop: 'note',
    label: '备注',
  },
  {
    prop: 'type',
    label: '类型',
  },
  {
    prop: 'optional',
    label: '可选值',
  },
  {
    prop: 'default',
    label: '默认值',
  },
];
const usageAttrTableData = [
  {
    parameter: 'title',
    note: '标题',
    type: 'string',
    optional: '-',
    default: '-',
  },
  {
    parameter: 'active',
    note: '根据active变化来展开或折叠',
    type: 'boolean',
    optional: '-',
    default: 'false',
  },
];
const usageSlotColumns: Array<Column> = [
  {
    prop: 'name',
    label: '名称',
  },
  {
    prop: 'note',
    label: '备注',
  },
  {
    prop: 'data',
    label: '数据',
  },
];
const usageSlotTableData = [
  {
    name: 'title',
    note: '自定义标题内容(添加图标等)',
    data: '-',
  },
];
</script>

<style scoped></style>
